﻿import React, { Component } from 'react'
import PropTypes from 'prop-types'
import checkIcon from '../imgs/check.png'
import greyChk from '../imgs/greycheck.png'
import './common.css'
import './Checkable.css'


export default class Checkable extends Component {
    static propTypes = {
        text: PropTypes.string.isRequired,
        checked: PropTypes.bool,
        onCheck: PropTypes.func,
        disabled: PropTypes.bool
    }
    render() {
        return (
            <div
                className='hflex'
                disabled={!this.props.onCheck}
                onClick={() => this.props.disabled !== true && this.props.onCheck()}>
                <div className='check-box'>
                    <div className='check-rect'></div>
                    {this.props.checked &&
                        <img alt='' className='check-img' src={this.props.disabled ? greyChk : checkIcon}></img>
                    }
                </div>
                <span>{this.props.text}</span>
            </div>
        )
    }
}